<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <title>分页</title>
</head>
<body>
    <div class="container">
        <nav>
            <!-- .pagination创建分页组件 -->
            <!-- .justify-content-center水平居中对齐到父容器 -->
            <!-- .pagination-lg大型分页组件 -->
            <ul class="pagination justify-content-center pagination-lg">
                <!-- .page-item分页中每个可点击的项 -->
                <!-- .disabled显示为禁用样式 -->
                <!-- .page-link点击可跳转的超链接 -->
                <li class="page-item disabled"  ><a href="#" class="page-link">上一页</a></li>
                <!-- .active显示为活动样式 -->
                <li class="page-item active"  ><a href="#" class="page-link">1</a></li>
                <li class="page-item"><a href="#" class="page-link">2</a></li>
                <li class="page-item"><a href="#" class="page-link">3</a></li>
                <li class="page-item"><a href="#" class="page-link">4</a></li>
                <li class="page-item"><a href="#"  class="page-link">下一页</a></li>
            </ul>
        </nav>
    </div>
    <script>
        $(document).ready(function(){
            // 当任何一个分页项被点击时
            $(".page-item").click(function(){
                // 移除所有active
                $(".page-item").removeClass("active");
                // 给当前被点击的分页项添加active
                $(this).addClass("active");
            })
        })
    </script>
    
</body>
</html>